<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户管理</title>
		<script src="js/vue.js"></script>
		<link rel="stylesheet" type="text/css" href="element-plus/index.css" />
		<script src="element-plus/index.full.js"></script>
		<!-- <link rel="stylesheet" type="text/css" href="element-plus/index.css" />
		<script src="element-plus/index.full.js" type="text/javascript" charset="utf-8"></script> -->
	</head>
	<style>
		* {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}

		nav {
			height: 50px;
			background-color: #00c;
			color: #fff;
			font-size: 16px;
			line-height: 50px;
			padding: 0 20px;
		}

		.content {
			width: calc(100% - 200px);
			height: calc(100vh -50px);
			border: 2px solid #f00;
			position: absolute;
			top: 50px;
			right: 0;
			padding: 20px;
		}
	</style>
	<body>
		<div id='app'>
			<nav>
				<span>后台管理系统</span>
				<span style="float: right;">admin</span>
			</nav>
			<el-menu style="width: 200px;height: calc(100vh - 50px);" default-active='1' background-color='#009'
				text-color='#fff' active-text-color='#ff0'>
				<el-menu-item index='1'>
					<span>用户管理</span>
				</el-menu-item>
				<el-menu-item index='2'>
					<span>系统设置</span>
				</el-menu-item>
				<el-menu-item index='3'>
					<span>日志管理</span>
				</el-menu-item>
			</el-menu>

			<div class="content">
				<el-card>
					<template #header>
						<span>用户管理</span>
						<el-button @click="show=true" type='primary' style="float: right;">添加用户</el-button>
					</template>
					<el-input v-model="key" stype="width:300px;">
						<template #append>
							<el-button @click="search">搜索</el-button>
						</template>
					</el-input>
					<el-table :data='tableData' style="margin: 20px 0;" border>
						<el-table-column prop='id' label='id'></el-table-column>
						<el-table-column prop='name' label='姓名'></el-table-column>
						<el-table-column prop='email' label='邮箱'></el-table-column>
						<el-table-column prop='phone' label='电话'></el-table-column>
						<el-table-column prop='role' label='角色'></el-table-column>
						<el-table-column prop='status' label='状态'>
							<template #default='scope'>
								<el-tag v-if='scope.row.status=="启用"' type='success'>{{scope.row.status}}</el-tag>
								<el-tag v-else type='danger'>{{scope.row.status}}</el-tag>
							</template>
						</el-table-column>

						<el-table-column label='操作'>
							<template #default='scope'>
								<el-button @click="show=true,form={...scope.row},current=scope.$index" size='small'
									type='primary'>编辑
								</el-button>
								<el-button @click="del(scope.$index)" size='small' type='danger'>删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination :total='50' layout="total,prev,pager,next,jumper">

					</el-pagination>
				</el-card>
				<el-dialog v-model="show" title='编辑用户' style="width:500px;">
					<el-form ref='userForm' :rules='rules' :model='form'>
						<el-form-item label='姓名' prop='name'>
							<el-input v-model="form.name"></el-input>
						</el-form-item>
						<el-form-item label='邮箱' prop='email'>
							<el-input v-model="form.email"></el-input>
						</el-form-item>
						<el-form-item label='电话' prop='phone'>
							<el-input v-model="form.phone"></el-input>
						</el-form-item>
						<el-form-item label='角色' prop='role'>
							<el-input v-model="form.role"></el-input>
						</el-form-item>
					</el-form>
					<template #footer>
						<el-button @click="show=false">取消</el-button>
						<el-button @click="post" type="primary">确定</el-button>
					</template>
				</el-dialog>
			</div>
		</div>

		<script>
			Vue.createApp({
				data() {
					return {
						show: false,
						key: '',
						form: {
							// name: '',
							// email: '',
							// phone: '',
							// email: '',
							// role: ''
						},
						current: 0,
						rules: {
							name: [{
								required: true,
								message: '请输入姓名',
								trigger: 'blur'
							}, ],
							email: [{
								required: true,
								message: '请输入邮箱',
								trigger: 'blur'
							}, ],
							phone: [{
								required: true,
								message: '请输入电话',
								trigger: 'blur'
							}, ],
							role: [{
								required: true,
								message: '请输入角色',
								trigger: 'blur'
							}]
						},
						remarkData: [],
						tableData: [{
								id: 1,
								name: '张三',
								email: 'zhangsan@example.com',
								phone: '13800138000',
								role: '管理员',
								status: '启用'
							},
							{
								id: 2,
								name: '李四',
								email: 'zhangsan@example.com',
								phone: '18860138052',
								role: '管理员',
								status: '禁用'
							},
							{
								id: 3,
								name: '王五',
								email: 'zhangsan@example.com',
								phone: '17350013802',
								role: '管理员',
								status: '启用'
							},
							{
								id: 4,
								name: '直播间',
								email: 'zhangsan@example.com',
								phone: '13667503506',
								role: '管理员',
								status: '启用'
							}
						]
					}
				},
				created() {
					this.remark()
				},
				methods: {
					remark() {
						this.remarkData = JSON.parse(JSON.stringify(this.tableData))
					},
					search() {
						this.tableData = this.remarkData.filter(item => {
							return item.name.indexOf(this.key) >= 0 ||
								item.phone.indexOf(this.key) >= 0
						})
					},
					del(i) {
						this.$confirm('确认删除该用户？', '提示', {
							type: 'warning',
							confirmButtonText: '确认',
							cancelButtonText: '取消'
						}).then(() => {
							this.tableData.splice(i, 1)
							this.remark()
						})
					},
					post() {
						this.$refs.userForm.validate(res => {
							if (res) {
								if (!this.form.id) {
									const newId = this.tableData.length > 0 ? Math.max(...this.tableData.map(
										item => item.id)) + 1 : 1;
									const newUser = {
										...this.form,
										id: newId,
										status: '启用'
									};
									this.tableData.push(newUser);
									// this.form = this.tableData.length
									 // this.tableData.push(this.form)
									this.$message.success('添加成功')
								} else {
									this.tableData[this.current] = {
										...this.form
									}
									this.$message.success('修改成功')
								}
								this.form = {}
								this.current = 0
								this.show = false
								this.remark()
							}
						})
					}
				}

			}).use(ElementPlus).mount('#app')
		</script>
	</body>
</html>
